<template>
  <a-modal v-model="constomVisible" title="自定义规则" width="75%">
    <template slot="footer" class="modelBtn">
      <a-button
        @click="cancel2"
        style="background: #d7d7d7; color: #fff; border: none"
        >取消</a-button
      >
      <a-button :loading="loading" type="primary" @click="handleOk"
        >确认</a-button
      >
    </template>
    <div class="criteria">
      <a-button class="addcus-btn" type="primary" @click="addCustomItem"
        >添加规则</a-button
      >
      <a-checkbox @change="onChangeIsZone" :checked="true" :disabled="true">
        分区是否为范围
      </a-checkbox>
      <a-checkbox @change="onChangeIsRange" :checked="true" :disabled="true">
        是否勾选范围
      </a-checkbox>
      <!-- <div class="conver">
        <span>转换单位：</span>
      </div> -->
      <!-- <div class="range">
        <span>范围单位：</span>
        <a-select
          show-search
          option-filter-prop="children"
          v-model="searchData.rangeUnit"
          allowClear
          size="small"
          placeholder="单位"
        >
          <a-select-option
            :value="item.value"
            v-for="item in ranges"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div> -->
    </div>
    <div style="color: #f00">注：红色框的为必填项！且右边的数不能小于左边</div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        size="small"
        :data-source="cusTabData"
        :pagination="false"
        bordered
      >
        <a-table-column
          key="rangeUnit"
          data-index="rangeUnit"
          align="center"
          width="24%"
        >
          <span slot="title">单位</span>
          <template slot-scope="text, record">
            <span v-if="record.sysLogisticsServiceWayQuotationId">
              {{
                record.rangeLeft +
                  "~" +
                  record.rangeRight +
                  " " +
                  record.rangeUnit
              }}
            </span>
            <div v-else>
              <a-input-number
                :style="
                  record.rangeLeft == null || record.rangeLeft == ''
                    ? styleNo
                    : styleYes
                "
                v-model="record.rangeLeft"
                :min="0.01"
                :precision="2"
                @change="value => changeRangeLeft(value, record)"
              />
              ~
              <a-input-number
                v-model="record.rangeRight"
                :min="record.rangeLeft * 1"
                :precision="2"
                @change="value => changeRangeRight(value, record)"
              />
              <a-select
                style="width: 30%; margin-left: 10px"
                show-search
                :style="
                  record.rangeUnit == null ||
                  record.rangeUnit == '' ||
                  record.rangeUnit == undefined
                    ? styleNo
                    : styleYes
                "
                option-filter-prop="children"
                v-model="record.rangeUnit"
                allowClear
                placeholder="单位"
              >
                <a-select-option
                  :value="item.value"
                  v-for="item in convers"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="convertRangeUnit"
          data-index="convertRangeUnit"
          align="center"
          width="24%"
        >
          <span slot="title">转换单位</span>
          <template slot-scope="text, record">
            <span v-if="record.sysLogisticsServiceWayQuotationId">
              {{
                record.convertRangeLeft +
                  "~" +
                  record.convertRangeRight +
                  " " +
                  record.convertRangeUnit
              }}
            </span>
            <div v-else>
              <a-input-number
                v-model="record.convertRangeLeft"
                :min="0.01"
                :style="
                  record.convertRangeLeft == null ||
                  record.convertRangeLeft == ''
                    ? styleNo
                    : styleYes
                "
                :precision="2"
                @change="value => changeConverRangeLeft(value, record)"
              />
              ~
              <a-input-number
                v-model="record.convertRangeRight"
                :min="record.convertRangeLeft * 1"
                :precision="2"
                @change="value => changeConverRangeRight(value, record)"
              />
              <a-select
                style="width: 30%; margin-left: 10px"
                show-search
                option-filter-prop="children"
                v-model="record.convertRangeUnit"
                allowClear
                :style="
                  record.convertRangeUnit == null ||
                  record.convertRangeUnit == '' ||
                  record.convertRangeUnit == undefined
                    ? styleNo
                    : styleYes
                "
                placeholder="单位"
              >
                <a-select-option
                  :value="item.value"
                  v-for="item in ranges"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="price"
          data-index="price"
          align="center"
          width="10%"
        >
          <span slot="title">价格</span>
          <template slot-scope="text, record">
            <span v-if="record.sysLogisticsServiceWayQuotationId">
              {{ record.price }}
            </span>
            <a-input-number
              v-else
              :style="
                record.price == null ||
                record.price == '' ||
                record.price == undefined
                  ? styleNo
                  : styleYes
              "
              style="width: 100%"
              v-model="record.price"
              :formatter="
                value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              "
              :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
              :precision="2"
            />
          </template>
        </a-table-column>
        <a-table-column
          key="zoneName"
          data-index="zoneName"
          align="center"
          width="10%"
        >
          <span slot="title">分区名称</span>
          <template slot-scope="text, record">
            <span v-if="record.sysLogisticsServiceWayQuotationId">
              {{ record.zoneName }}
            </span>
            <a-input
            :maxLength="128"
              v-else
              v-model="record.zoneName"
              :style="
                record.zoneName == null ||
                record.zoneName == '' ||
                record.zoneName == undefined
                  ? styleNo
                  : styleYes
              "
            />
          </template>
        </a-table-column>
        <a-table-column
          key="isZone"
          data-index="isZone"
          align="center"
          width="24%"
        >
          <span slot="title">范围</span>
          <template slot-scope="text, record">
            <span v-if="record.sysLogisticsServiceWayQuotationId">
              {{ record.zoneLeft + "~" + record.zoneRight }}
            </span>
            <div v-else>
              <a-input-number
                v-model="record.zoneLeft"
                :min="0.01"
                :style="
                  record.zoneLeft == null || record.zoneLeft == ''
                    ? styleNo
                    : styleYes
                "
                :precision="2"
                @change="value => changezoneLeft(value, record)"
              />
              ~
              <a-input-number
                v-model="record.zoneRight"
                :min="record.zoneLeft * 1"
                :precision="2"
                @change="value => changezoneRight(value, record)"
              />
            </div>
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column key="operation" data-index="operation" align="center">
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a-popconfirm
              title="是否要删除?"
              ok-text="是"
              cancel-text="取消"
              @confirm="e => onDelete(e, record)"
            >
              <a
                href="javascript:;"
                style="color: #f00; border-bottom: 1px solid #f00"
                >删除</a
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  cus_searchTabList,
  cus_addOrEditGui,
  cus_deleteGui
} from "@/apis/system/setManage/setLogistics";
export default {
  data() {
    return {
      styleNo: {
        border: "1px solid #f00",
        borderRadius: "5px"
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px"
      },
      spinning: false,
      //单位数组
      convers: [
        { value: "0", label: "OZ" },
        { value: "1", label: "g" }
      ],
      //范围数组
      ranges: [
        { value: "0", label: "OZ" },
        { value: "1", label: "g" }
      ],
      //表格数据
      cusTabData: [],
      //传递过来的服务方式的ID
      sysLogisticsServiceWayId: "",
      searchData: {
        size: 10,
        current: 1,
        //是否分区范围
        isZone: 1,
        //是否范围
        isRange: 1,
        //转换单位
        convertRangeUnit: undefined,
        //范围转换单位
        rangeUnit: undefined
      },
      total: 5,
      loading: false,
      constomVisible: false
    };
  },
  mounted() {
    this.$bus.$off("addCustom");
    this.$bus.$on("addCustom", async record => {
      this.sysLogisticsServiceWayId = record.sysLogisticsServiceWayId;
      this.getCusTabList();
      this.constomVisible = true;
    });
  },
  methods: {
    //单位左
    changeRangeLeft(value, record) {
      if (record.rangeLeft != null && record.rangeLeft != "") {
        if (record.rangeRight == null || record.rangeRight == "") {
          record.rangeRight = record.rangeLeft;
        }
      }
    },
    //单位右
    changeRangeRight(value, record) {
      if (record.rangeRight != null || record.rangeRight != "") {
        if (record.rangeLeft == null && record.rangeLeft == "") {
          record.rangeLeft = record.rangeRight;
        }
      }
    },
    //分区范围左
    changezoneLeft(value, record) {
      if (record.zoneLeft != null && record.zoneLeft != "") {
        if (record.zoneRight == null || record.zoneRight == "") {
          record.zoneRight = record.zoneLeft;
        }
      }
    },
    //分区范围右
    changezoneRight(value, record) {
      if (value != null || value != "") {
        if (record.zoneLeft == null && record.zoneLeft == "") {
          record.zoneLeft = record.zoneRight;
        }
      }
    },
    //改变单位左
    changeConverRangeLeft(value, record) {
      if (record.convertRangeLeft != null && record.convertRangeLeft != "") {
        if (
          record.convertRangeRight == null ||
          record.convertRangeRight == ""
        ) {
          record.convertRangeRight = record.convertRangeLeft;
        }
      }
    },
    //改变单位右
    changeConverRangeRight(value, record) {
      if (record.convertRangeRight != null || record.convertRangeRight != "") {
        if (record.convertRangeLeft == null && record.convertRangeLeft == "") {
          record.convertRangeLeft = record.convertRangeRight;
        }
      }
    },
    //是否分区范围
    onChangeIsZone(e) {
      if (e.target.checked) {
        this.searchData.isZone = 0;
      } else {
        this.searchData.isZone = 1;
      }
    },
    //是否范围
    onChangeIsRange(e) {
      if (e.target.checked) {
        this.searchData.isRange = "0";
      } else {
        this.searchData.isRange = "1";
      }
    },
    //新增按钮
    addCustomItem() {
      this.cusTabData.push({
        rangeLeft: null,
        rangeRight: null,
        rangeUnit: undefined,
        convertRangeLeft: null,
        convertRangeRight: null,
        convertRangeUnit: undefined,
        zoneLeft: null,
        zoneRight: null,
        zoneName: null,
        price: null,
        key: this.cusTabData.length * 1
      });
    },
    //关闭模态框
    cancel2() {
      this.constomVisible = false;
      this.addserForm = {
        wayName: "",
        isDisable: 1,
        remarks: ""
      };
    },
    //删除
    async onDelete(e, row) {
      if (row.sysLogisticsServiceWayQuotationId) {
        let res = await cus_deleteGui(
          this.sysLogisticsServiceWayId,
          row.sysLogisticsServiceWayQuotationId
        );
        if (res.code == "10000") {
          this.getCusTabList();
        }
      } else {
        this.cusTabData.forEach((item, index) => {
          if (item.key == row.key) {
            this.cusTabData.splice(index, 1);
          }
        });
      }
    },

    //确认按钮
    async handleOk() {
      this.loading = true;
      let passFlag = true;
      let isADD = false;
      let subArr = [];
      if (this.cusTabData.length == 0) {
        this.cancel2();
        this.loading = false;
        return false;
      }
      this.cusTabData.forEach(item => {
        //如果有ID就代表没新增的，直接关闭
        if (
          item.sysLogisticsServiceWayQuotationId == null ||
          item.sysLogisticsServiceWayQuotationId == undefined ||
          item.sysLogisticsServiceWayQuotationId == ""
        ) {
          isADD = true;
        }
      });
      if (isADD) {
        this.cusTabData.forEach(item => {
          //否则才走新增
          if (
            item.rangeLeft == null ||
            item.rangeLeft == "" ||
            item.rangeLeft == undefined
          ) {
            passFlag = false;
          }
          if (
            item.rangeUnit == null ||
            item.rangeUnit == undefined ||
            item.rangeUnit == ""
          ) {
            passFlag = false;
          }
          if (
            item.convertRangeLeft == null ||
            item.convertRangeLeft == "" ||
            item.convertRangeLeft == undefined
          ) {
            passFlag = false;
          }
          if (
            item.convertRangeUnit == null ||
            item.convertRangeUnit == undefined ||
            item.convertRangeUnit == ""
          ) {
            passFlag = false;
          }
          if (
            item.price == null ||
            item.price == "" ||
            item.price == undefined
          ) {
            passFlag = false;
          }
          if (
            item.zoneName == null ||
            item.zoneName == "" ||
            item.zoneName == undefined
          ) {
            passFlag = false;
          }
          if (
            item.zoneLeft == null ||
            item.zoneLeft == "" ||
            item.zoneLeft == undefined
          ) {
            passFlag = false;
          }
        });
      } else {
        this.loading = false;
        this.cancel2();
        return false;
      }
      if (passFlag) {
        this.cusTabData.forEach(item => {
          if (
            item.rangeRight == "" ||
            item.rangeRight == null ||
            item.rangeRight == undefined
          ) {
            item.rangeRight = item.rangeLeft;
          }
          if (
            item.zoneRight == "" ||
            item.zoneRight == null ||
            item.zoneRight == undefined
          ) {
            item.zoneRight = item.zoneLeft;
          }
          if (
            item.convertRangeRight == "" ||
            item.convertRangeRight == null ||
            item.convertRangeRight == undefined
          ) {
            item.convertRangeRight = item.convertRangeLeft;
          }
        });
        subArr = this.cusTabData.filter(item => {
          return !item.sysLogisticsServiceWayQuotationId;
        });
        let res = await cus_addOrEditGui(this.sysLogisticsServiceWayId, subArr);
        if (res.code == "10000") {
          this.constomVisible = false;
          this.loading = false;
          this.getCusTabList();
        }
      } else {
        this.loading = false;
        this.$message.error("有必填项未填写！");
        return false;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getCusTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.size = size * 1;
      this.searchData.current = current * 1;
      this.getCusTabList();
    },
    //获取表格数据
    async getCusTabList() {
      this.spinning = true;
      let res = await cus_searchTabList(
        this.sysLogisticsServiceWayId,
        this.searchData
      );
      if (res.code == "200") {
        this.cusTabData = res.responseBody.records;
        this.cusTabData.forEach(item => {
          if (item.rangeUnit == "0") {
            item.rangeUnit = "OZ";
          } else if (item.rangeUnit == "1") {
            item.rangeUnit = "g";
          } else if (item.rangeUnit == "2") {
            item.rangeUnit = "立方英尺";
          } else if (item.rangeUnit == "3") {
            item.rangeUnit = "M";
          }
          if (item.convertRangeUnit == "0") {
            item.convertRangeUnit = "OZ";
          } else if (item.convertRangeUnit == "1") {
            item.convertRangeUnit = "g";
          } else if (item.convertRangeUnit == "2") {
            item.convertRangeUnit = "立方英尺";
          } else if (item.convertRangeUnit == "3") {
            item.convertRangeUnit = "M";
          }
        });
        this.total = res.responseBody.total * 1;
        this.searchData.size = res.responseBody.size * 1;
        this.spinning = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.criteria {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .addcus-btn {
    margin-right: 15px;
  }
  /deep/.ant-checkbox-wrapper {
    margin-right: 15px;
    span:last-child {
      padding: 0 !important;
    }
  }
  .conver {
    margin-right: 15px;
    .ant-select {
      width: 100px;
    }
  }
  .range {
    margin-right: 15px;
    .ant-select {
      width: 100px;
    }
  }
}
</style>
